import { defineComponent, ref, Transition } from "vue"
import { NAvatar, NButton } from "naive-ui"
import Baseset from "./baseset"
import Usernameset from "./usernameset"
import Bgimageset from "./bgimageset"
import Statistics from "./statistics"
import Security from "./security"
export default defineComponent({
    name: "setting",
    setup() {
        const activeIndex = ref(1)
        // 点击左侧选项
        const handleClick = (index: number) => {
            activeIndex.value = index
        }
        return () => (<div class="w-full h-full bg-white flex">
            <div class="w-255px h-full overflow-x-hidden overflow-y-auto border-r border-gray-600">
                <div class="w-full py-20px juzhong1 flex-col">
                    <NAvatar
                        round
                        size={60}
                        src={"https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"}
                    />
                    <span>[系统管理员]</span>
                    <NButton text={true} class="text-blue-400">名字1111</NButton>
                </div>
                <div class={["w-full h-10 px-5 cursor-pointer flex items-center hover:(bg-blue-200 text-blue-500)", activeIndex.value === 1 ? "bg-blue-200 text-blue-500 border-r-2 border-niluolan" : ""]} onClick={() => handleClick(1)}>
                    <span>基础设置</span>
                </div>
                <div class={["w-full h-10 px-5 cursor-pointer flex items-center hover:(bg-blue-200 text-blue-500)", activeIndex.value === 2 ? "bg-blue-200 text-blue-500  border-r-2 border-niluolan" : ""]} onClick={() => handleClick(2)}>
                    <span>账号设置</span>
                </div>
                <div class={["w-full h-10 px-5 cursor-pointer flex items-center hover:(bg-blue-200 text-blue-500)", activeIndex.value === 3 ? "bg-blue-200 text-blue-500 border-r-2 border-niluolan" : ""]} onClick={() => handleClick(3)}>
                    <span>壁纸设置</span>
                </div>
                <div class={["w-full h-10 px-5 cursor-pointer flex items-center hover:(bg-blue-200 text-blue-500)", activeIndex.value === 4 ? "bg-blue-200 text-blue-500 border-r-2 border-niluolan" : ""]} onClick={() => handleClick(4)}>
                    <span>安全管理</span>
                </div>
                <div class={["w-full h-10 px-5 cursor-pointer flex items-center hover:(bg-blue-200 text-blue-500)", activeIndex.value === 5 ? "bg-blue-200 text-blue-500 border-r-2 border-niluolan" : ""]} onClick={() => handleClick(5)}>
                    <span>使用统计</span>
                </div>
            </div>
            <div class="flex-1 h-full overflow-x-hidden overflow-y-auto">
                <Transition
                    leave-active-class="animate__animated animate__fadeOutDown">
                    {activeIndex.value === 1 ? <Baseset /> : activeIndex.value === 2 ? <Usernameset /> : activeIndex.value === 3 ? <Bgimageset /> : activeIndex.value === 4 ? <Security /> : activeIndex.value === 5 ? <Statistics /> : null}
                </Transition>
            </div>
        </div>)
    },
})

